<template>
  <div class="gl_contentBox gl_heightFull">
    <el-tabs v-model="activeTab" class="gl_tabs" type="card">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component :is="item.component" :is-show="activeTab === item.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import officialCertificat from './officialCertificat.vue';
import unofficialCertificat from './unofficialCertificat.vue';
import examination from './examination.vue';
import training from './training.vue';

export default {
  data () {
    return {
      activeTab: 'training',
      tabList: [
        {
          label: '培训科目设置',
          name: 'training',
          component: training
        },
        {
          label: '考试科目设置',
          name: 'examination',
          component: examination
        },
        {
          label: '官方科目证书',
          name: 'officialCertificat',
          component: officialCertificat
        },
        {
          label: '非官方科目证书',
          name: 'unofficialCertificat',
          component: unofficialCertificat
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>

</style>
